<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=yes" />
    <title>NFC开通指南</title>
    <link rel="stylesheet" type="text/css" href="./mui/css/mui.min.css" />
    <script src="./mui/js/mui.min.js"></script>
    <script type="text/javascript" src="./vue.js"></script>
    <link rel="stylesheet" href="./css/bigData.css">
    <link rel="stylesheet" href="./css/element.css" />
    <script src="./js/element.js"></script>
    <script src="./js/rem.js"></script>
    <script src="./js/clipboard.min.js"></script>


</head>

<body>
    <div id="app" class="app"></div>

    <div class="big-box">
        <div class="top-box">
            <div class="topImgBox">
                <img class="top-img" src="./assets/img/bgi.png" alt="">
            </div>
            <!-- <p class="school-name">深职大</p> -->
            <!-- <p class="title">NFC校园卡开通</p> -->

        </div>
        <div class="content-box">
            <div class="itemBox">
                <div class="shareTitle" style="margin-bottom: 0rem;">
                    <img src="./assets/img/nfc3.png" alt="">
                    <span class="frontDesc">NFC校园卡功能</span>
                </div>
                <p class="openDesc" style="text-indent: 0.2rem;">
                    通过手机操作，将校园卡绑定到手机卡包，消费时无需解锁屏幕，用手机背面碰一下刷卡区域，即可完成扣费或身份认证。当前支持食堂POS机支付、电子班牌签到和门禁解锁场景。
                </p>
                <div class="">
                    支持手机品牌：<span class="frontDesc">小米、华为、vivo、oppo</span>
                </div>
                <div class="open-one">

                </div>
            </div>
            <div class="itemBox">
                <div class="shareTitle">
                    <img src="./assets/img/nfc3.png" alt="">
                    <span class="frontDesc">开通方法</span>
                    <p class="openDesc" style="text-indent: 0.2rem; width: 100">
                        复制以下链接到手机自带浏览器打开，
                    如<span class="frontDesc" style="word-break:normal;font-weight: 600;">华为浏览器，小米浏览器，VIVO浏览器，ColorOS浏览器</span>，其他手机浏览器暂不支持。
                        <span class="frontDesc" style="text-align:center"
                            id="user_ref_id">https://yktwx.szpu.edu.cn/plat/login</span></p>
                        <p class="openDesc" style="text-align: center;">
                        
                        <input id="value_id" class="custom_button" type="button" value="点击按钮复制链接">
                    </p>
                </div>
                <div class="imgBox_h">
                    <img class="itemBigImg" src="./assets/img/pic1.png" alt="">
                    <img class="itemBigImg" src="./assets/img/pic2.png" alt="">
                </div>
                <div class="imgBox_h">
                    <img class="itemBigImg" src="./assets/img/pic3.png" alt="">
                    <img class="itemBigImg" src="./assets/img/pic4.png" alt="">
                </div>
                <div class="imgBox_h">
                    <img class="itemBigImg" src="./assets/img/pic5.png" alt="">
                    <img class="itemBigImg" src="./assets/img/pic6.png" alt="">
                </div>
            </div>

            <div class="itemBox ">
                <div class="shareTitle">
                    <img src="./assets/img/nfc3.png" alt="">
                    <span class="frontDesc">NFC校园卡解绑</span>
                    <p class="openDesc" style="text-indent: 0.2rem;">
                        在手机“钱包”应用内删除卡片，或者重新打开NFC校园卡开通页面，点击“点此删除手机NFC校园卡”，即可解除校园卡与手机的绑定。解绑不影响账户余额。
                    </p>
                </div>
                <div class="imgBox_h">
                    <img class="itemBigImg" src="./assets/img/d1.png" alt="">
                    <img class="itemBigImg" src="./assets/img/d2.png" alt="">
                </div>

                <div class="lastBox">
                    <img class="" style="width:100%" src="./assets/img/end.gif" />
                </div>
            </div>

        </div>

    </div>
</body>
<script>
    // mui.init();
    var btn = document.querySelector('#value_id');
    btn.addEventListener('click', () => {
        const textCopied = ClipboardJS.copy('https://yktwx.szpu.edu.cn/plat/login');
        console.log('copied!', textCopied);
        document.getElementById('value_id').value = "已复制成功"
        mui.alert("", "复制成功", function () { })
    })

</script>

</html>